<template>
  <div>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <!-- 全组组件面包屑 -->
      <my-bread-crumb>素材管理</my-bread-crumb>
    </div>

    <!-- -对话框 -->
    <el-button type="success" size="mini" style="float:right" @click="uploadData.dialogVisible = true">上传素材</el-button>
    <!-- 点击上面按钮开启弹层↓ -->
    <el-dialog
      title="请选择图片"
      :visible.sync="uploadData.dialogVisible"
      append-to-body>
      <!-- upload上传图片 -->
      <el-upload
      class="avatar-uploader"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :headers="uploadData.headers"
        name="image"
        list-type="picture-card"
        :show-file-list="false"
        :on-success="uploadSuccess"
        :before-upload="uploadBefore">
                  <!-- 当上传成功之后，imageUrl就会有值，此时做预览 -->
                  <el-image v-if="uploadData.url" :src="uploadData.url" class="avatar" @load="hLoadUploadImage" />
                            <!-- 没有上传之前，这里是一个大大的 + -->
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <!-- 上传图片end -->
    </el-dialog>

    <!-- 全部收藏按钮 -->
    <div style="padding-bottom: 20px;">
      <el-radio-group  v-model="imagesData.collect" size="mini" @change="isCollectFn">
        <el-radio-button :label="null">全部</el-radio-button>
        <el-radio-button :label="true">收藏</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 素材 -->
    <el-row :gutter="12">
      <el-col  class="img_item" :xs="12" :sm="6" :md="6" :lg="4" v-for="val in images" :key="val.id">
        <el-image
          style="height: 180px;width: 180px"
          :src="val.url"
          fit="cover"
        ></el-image>
        <div class="option">
          <span class="el-icon-star-off" :class="{'red':val.is_collected}" @click="collectIt(val)"></span>
          <span class="el-icon-delete" @click="delIt(val.id)"></span>
        </div>
      </el-col>
    </el-row>

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pageData.totalCount"
      :page-size="imagesData.per_page"
      @current-change="pageFn"
      :current-page="imagesData.page"
      >
    </el-pagination>

  </el-card>
</div>
</template>

<script>
export default {
  name: 'images',
  data: function () {
    return {
      uploadData: {
        headers: { Authorization: 'Bearer ' + localStorage.token },
        url: '',
        dialogVisible: false
      },
      images: [],
      pageData: {
        totalCount: 0
      },
      imagesData: {
        collect: null,
        page: 1,
        per_page: 10
      }
    }
  },
  mounted () {
    this.imagesFn()
  },
  methods: {
    uploadBefore (file) {
      if (file.type !== 'image/jpeg' || file.size / 1024 / 1024 >= 2) {
        this.$message.error('请上传jpg格式的图片(小于2MB)')
        return false
      }
    },
    hLoadUploadImage () {
      console.log('图片加载完成...')
      setTimeout(() => {
        this.uploadData.url = ''
        this.uploadData.dialogVisible = false
      }, 1000)
    },
    uploadSuccess (res, file) {
      // 1. 上传成功，预览图片
      console.log('上传成功了，从后端返回的数据', res, file)
      // imageUrl用来展示上传的图片
      // this.imageUrl = URL.createObjectURL(file.raw)
      this.uploadData.url = res.data.url
      this.imagesFn()
    },
    imagesFn () {
      this.$axios.get('/mp/v1_0/user/images', { params: this.imagesData }).then(res => {
        this.images = res.data.data.results
        this.pageData.totalCount = res.data.data.total_count
      }).catch(err => {
        console.log(err)
      })
    },
    pageFn: function (a) { // 切换组件页码
      this.imagesData.page = a
      this.imagesFn()
    },
    isCollectFn: function (a) { // 切换收藏全部
      this.imagesData.collect = a
      this.pageFn(1)
      this.imagesFn()
    },
    collectIt: function (val) { // 点星星
      val.is_collected = !val.is_collected
      this.$axios({
        method: 'PUT',
        url: '/mp/v1_0/user/images/' + val.id,
        data: { collect: val.is_collected }
      }).then(res => {
        console.log(res)
        this.$message.success('操作成功')
      }).catch(err => { console.log(err) })
    },
    delIt: function (id) { // 点垃圾桶
      this.$axios({
        method: 'DELETE',
        url: '/mp/v1_0/user/images/' + id
      }).then(res => {
        this.$message.success('删除成功')
        this.imagesFn()
      }).catch(err => { console.log(err) })
    }

  }
}
</script>

<style scoped lang="less">
.img_item {
  position: relative;
  box-sizing: border-box;
}
.option {
  position: absolute;
  left: 5px;
  width:180px;
  bottom: 5px;
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #fff;
  span {
    margin: 0 30px;
    cursor: pointer;
  }
}
.red {
  color: red;
}

.avatar-uploader {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
